<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2022/10/27
  Time: 22:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.js"></script>
</head>
<body>
<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-panel" style="">
                <div style="padding: 50px 30px;">
                    <div class="layui-carousel" id="test1" lay-filter="test1">
                        <div carousel-item="" style="text-align: center">
                            <img style="width: 100%" src="${pageContext.request.contextPath}/images/imgs/春天.jpg" alt="">
                            <img style="width: 100%" src="${pageContext.request.contextPath}/images/imgs/夏天.jpg" alt="">
                            <img style="width: 100%" src="${pageContext.request.contextPath}/images/imgs/秋天.jpg" alt="">
                            <img style="width: 100%" src="${pageContext.request.contextPath}/images/imgs/冬天.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15" style="margin-top: 30px">
                <div class="layui-col-md4">
                    <div class="layui-panel">
                        <a href="https://www.jd.com" target="_blank">
                            <img style="width: 100%" src="${pageContext.request.contextPath}/images/imgs/京东.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-panel">
                        <a href="https://www.tmall.com" target="_blank">
                            <img style="width: 100%" src="${pageContext.request.contextPath}/images/imgs/天猫.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-panel">
                        <a href="https://www.baidu.com" target="_blank">
                            <img style="width: 100%" src="${pageContext.request.contextPath}/images/imgs/百度.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-panel">

                <div class="layui-bg-gray" style="padding: 30px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-panel">
                                <div id="tuDemo1" style="width: 100%; height: 45%">

                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-panel">
                                <div id="bingTu" style="width: 100%; height: 45%">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['carousel', 'form'], function() {
        var carousel = layui.carousel;

        //常规轮播
        carousel.render({
            elem: '#test1',
            width: 750
        });
    })
    //折线图数据
    let x = [];
    let y = [];
    let educationInfo = '${educationInfo}';
    educationInfo = eval(educationInfo);  //转化json数据
    educationInfo.forEach(function (val,index) {
        // console.log(val)
        x.push(val.education);
        y.push(val.toll);
    })

    //饼状图数据
    let bingData = [];
    let deptInfo = '${deptInfo}';
    deptInfo = eval(deptInfo);
    deptInfo.forEach(function (val,index) {
        console.log(val);
        var map = new Map();
        var object = new Object();
        object.value = val.toll;
        object.name = val.deptName;
        // map.set('value',val.toll);
        // map.set('name',val.deptName);
        bingData.push(object)
    })
    console.log(bingData)

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('tuDemo1'));
    var bingTu = echarts.init(document.getElementById('bingTu'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '员工学历统计'
        },
        tooltip: {},
        legend: {
            data: ['人数']
        },
        xAxis: {
            data: x,
            axisLabel:{
                rotate:-45
            }
        },
        yAxis: {},
        series: [
            {
                name: '人数',
                type: 'line',
                data: y
            }
        ]
    };

    var optionBingTu = {
        legend: {
            top: 'bottom'
        },
        title: {
            text: '部门员工人数'
        },
        tooltip: {
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                name: '部门人数',
                type: 'pie',
                radius: '50%',
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: bingData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    bingTu.setOption(optionBingTu);
</script>
</html>
